<template>
    <div class="main set_summary">
        <div class="title space-between pb32">
            <span class="ft16 fw6 fc-black">项目完结</span>
            <div class="align-row-center">
                <i class="icon ic_close" @click="closeFn"></i>
            </div>
        </div>
        <div class="form ft14 fc-black ">
            <el-form label-width="111px" class="demo-ruleForm">
                <div class=" pb32">{{ projectName }}</div>
                <div class="pb32">
                    <el-radio v-model="ruleForm.warning" :label="false">项目正常</el-radio>
                    <el-radio v-model="ruleForm.warning" :label="true">项目异常</el-radio>
                </div>
                <div class="align-row-center">
                    <span class="mr40">当前进度：{{ currentProgress || 0}}%</span>
                    <span class="mr32">最新进度</span>
                    <div class="w20">
                        <el-input type="input" :min="0" :max="99" :maxlength="2" v-model="ruleForm.progressProportion" placeholder="输入整数（最多99）" >
                            <i slot="suffix" class="icon-bfh">%</i>
                        </el-input>
                    </div>
                </div>
                <div class="mt24">
                    <el-input type="textarea" :resize="'none'" v-model="ruleForm.content" :rows="3"  placeholder="输入总结内容" ></el-input>
                </div>
                <div class="modal-btns mt24">
                    <div class="save-btn" @click="submitForm">确定</div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name:'projectEnd',
    props:{
        data:{
            type: Object,
			required: {}
        }
    },
    data() {
        return {
            projectName:'',
            currentProgress:0,
            ruleForm: {
                content:'',
                progressProportion:'',
                warning:false,
            },
        }
    },
    created() {
        if(JSON.stringify(this.data) != '{}' && !!this.data == true){
            console.log(this.data);
            this.ruleForm.projectId = this.data.projectId;
            this.ruleForm.dynamicId = this.data.dynamicId || null;
            this.ruleForm.content = this.data.content || '';
            this.ruleForm.progressProportion = this.data.progressProportion || '';
            this.ruleForm.warning = this.data.warning || false;
            this.projectName = this.data.projectName;
            this.currentProgress = this.data.currentProgress || 0;
        }
    },
    methods: {
        //关闭
        closeFn() {
            this.$emit("close",'is_show_setSummary');
        },
        submitForm() {
            if(this.ruleForm.progressProportion == ''){
                this.$message({
                    message: '请输入项目最新进度',
                    type: 'error'
                });
                return false;
            }
            let reg = /^[0-9]\d?$/;
            if(reg.test(this.ruleForm.progressProportion) == false){
                this.$message({
                    message: '请输入0-99的整数',
                    type: 'error'
                });
                return false;
            }
            if(this.ruleForm.content == ''){
                this.$message({
                    message: '请输入项目经理总结内容',
                    type: 'error'
                });
                return false;
            }
            console.log(this.ruleForm,"rrr");
            let url = '/project/dynamic/appendReport';
            if(this.ruleForm.dynamicId != null){
                url = '/project/dynamic/updateReport'
            }
            this.$http.post(url,this.ruleForm).then(res =>{
                if(res.statusCode == 200){
                    this.$emit("callback",true);
                }else{
                    this.$message({
                        message: res.statusMsg || '请求失败',
                        type: 'error'
                    });
                }
            }).catch(err =>{
                console.log(err)
            })
        },
    }
}
</script>

<style scoped type="text/scss" lang="scss">
.main {
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 6px;
    width: 608px;
  /*389px*/
    height: 413px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 32px 32px 0 32px;
    overflow: hidden;
    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .modal-btns{
            display: flex;
            flex-direction:row-reverse;
        }
        .cancel-btn, .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
        }
        .save-btn {
            background-color: #0755db;
            color: #FFFFFF;
        }
        .cancel-btn {
            color: #b3c0c9;
        }
        .add-manager {
            position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("~@/assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        .add-manager:hover{
            background-image: url("~@/assets/img/project/add_manager_icon2.png");
        }
    }
    .icon-bfh{
        position: absolute;
        top: 14px;
        right: 8px;
        font-size:14px;
        color: #454a55;
    }
    .ic_accomplish{
        width: 14px;
        height: 14px;
        background-image: url("~@/assets/img/project/info/ic_accomplish.png");
    }
}
</style>
<style lang="scss" type="text/scss">
.set_summary{
    .form {
        .el-form-item__label {
            padding-right: 16px;
        }
        .el-input__inner{
            width: 200px;
            background-color: #f2f6f9;
        }
        .el-textarea__inner {
            width:100%;
            background-color: #f2f6f9;
        }
        .el-date-editor--date, .el-date-editor--time {
            .el-input__inner {
            width: 176px;
            }
        }
        .el-input__inner:focus, .el-textarea__inner:focus {
            background-color: #FFFFFF;
        }
        .line-time {
            width: 20px;
        }
    }
}
</style>
